import { createBrowserRouter } from "react-router-dom"
import { lazy, Suspense } from "react"
import { Result, Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import AuthRoute from "@/components/AuthRoute";
import Layout from "@/pages/Layout";

// 懒加载
const Home = lazy(() => import("@/pages/Home"))
const Article = lazy(() => import("@/pages/Article"))
const Publish = lazy(() => import("@/pages/Publish"))
const Login = lazy(() => import("@/pages/Login"))

// 封装异步路由的封装逻辑
const AsyncComp = (Comp: JSX.Element) => {
  return (
    <Suspense fallback={
      <Spin 
        size="large" 
        indicator={<LoadingOutlined style={{ fontSize: 30 }} spin />} 
      /> 
    }>
      {Comp}
    </Suspense>
  )
}

const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthRoute children={<Layout />}></AuthRoute>,
    children: [
      {
        index: true,
        element: AsyncComp(<Home/>)
      }, 
      {
        path: "article",
        element: AsyncComp(<Article/>)
      }, 
      {
        path: "publish",
        element: AsyncComp(<Publish/>)
      }
    ]
  }, 
  {
    path: "/login",
    element: AsyncComp(<Login/>)
  },
  {
    path: "*",
    element: (
      <Result
        status="404"
        title="404"
        subTitle="资源不存在"
      />
    )
  }
])

export default router